<template>
  <div v-if="!loading">
    <div class="contract-header" v-if="!contractData">
      暂未添加合同信息 <span @click="eidtDetail()">立即添加</span>
    </div>
    <template v-else>
      <div class="info-top">
        <h2>基本信息</h2>
        <div class="user-btn-status">
          <!--        <span class="btn-user-r el-icon-folder-delete" @click="closePoint()">结束</span>-->
          <span class="btn-user-r el-icon-edit-outline" @click="eidtDetail()">编辑</span>
        </div>
      </div>
      <div class="info-header">
        <el-row :gutter="10">
          <el-col :span="8">
            <p class="info-deader-line">
              <span class="line-title">项目名称</span>
              {{ projectData ? projectData.name : '' }}
            </p>
          </el-col>
          <el-col :span="8">
            <p class="info-deader-line">
              <span class="line-title">甲方信息</span>
              {{ userData ? userData.name : '' }}
            </p>
          </el-col>
          <el-col :span="8">
            <p class="info-deader-line">
              <span class="line-title">合同总价</span>
              {{ contractData ? contractData.money : '' }}
            </p>
          </el-col>
          <!--          <el-col :span="8">-->
          <!--            <p class="info-deader-line">-->
          <!--              <span class="line-title">项目状态</span>-->
          <!--              {{ contractData ? contractData.status : '' }}-->
          <!--            </p>-->
          <!--          </el-col>-->
          <el-col :span="8">
            <p class="info-deader-line">
              <span class="line-title">开始时间</span>
              {{ contractData ? contractData.startTime : '' }}
            </p>
          </el-col>
          <el-col :span="8">
            <p class="info-deader-line">
              <span class="line-title">结束时间</span>
              {{ contractData ? contractData.endTime : '' }}
            </p>
          </el-col>
        </el-row>
      </div>
    </template>
    <!--    neepage-->
    <div class="contract-body">
      <div class="contract-box">
        <el-row>
          <el-col :span="18">
            <div>
              <h3>
                厦门金鼎胜物业管理有限公司（KHHT-20240227-001)
              </h3>
              <p>
                <span>签约客户</span> 厦门金鼎胜物业管理有限公司
              </p>
              <p>
                <span>签约方</span> 厦门金鼎胜物业管理有限公司
              </p>
            </div>
          </el-col>
          <el-col :span="6">
            <p>合同状态</p>
            <p>执行中</p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">
            <p>合同总金额</p>
            <p>￥1,188,000</p>
            <p>待收款:壹佰壹拾捌万捌仟元整</p>
          </el-col>
          <el-col :span="12">
            <el-progress :percentage="10" :color="customColors"></el-progress>
          </el-col>
          <el-col :span="3">
            <p>签约驻点(个)</p>
            <p>1</p>
          </el-col>
          <el-col :span="3">
            <p>签约保安(人)</p>
            <p>0</p>
          </el-col>
        </el-row>
      </div>
      <div class="contract-tabs">
        <el-tabs v-model="activeName">
          <el-tab-pane label="合同信息" name="info"></el-tab-pane>
          <el-tab-pane label="发票" name="invoice"></el-tab-pane>
        </el-tabs>
        <div class="contract-tabs-info">
          <div class="contract-tabs-info-header mb20">
            <div class="contract-tabs-info-header-l">
              <span>签约客户</span>
              厦门金鼎胜物业管理有限公司
            </div>
            <div class="contract-tabs-info-header-l">
              <span>合同总金额</span>
              ￥1,188,000(壹佰壹拾捌万捌仟元整)
            </div>
          </div>
          <div class="contract-tabs-info-a">
            <div class="contract-tabs-info-title">
              基础信息
            </div>
            <div class="contract-tabs-info-list">
              <span class="contract-tabs-info-list-title">
                合同编号
              </span>
              KHHT-20240227-001
            </div>
            <div class="contract-tabs-info-list">
              <span class="contract-tabs-info-list-title">
                合同起止日期
              </span>
              2023-12-01 至 2024-11-30
            </div>
          </div>
          <div class="contract-tabs-info-a">
            <div class="contract-tabs-info-title">
              签约双方
            </div>
            <div class="contract-tabs-info-log mb20">
              <div class="contract-tabs-info-log-title">
                我放信息
              </div>
              <div class="contract-tabs-info-log-l">
                <div class="contract-tabs-info-log-l-l">
                  <span>
                    我方负责人
                  </span>
                  王祝兵 18950134200
                </div>
                <div class="contract-tabs-info-log-l-l">
                  <span>
                    我方签约人
                  </span>
                  王祝兵 18950134200
                </div>
              </div>
            </div>
            <div class="contract-tabs-info-log mb20">
              <div class="contract-tabs-info-log-title">
                签约客户
              </div>
              <div class="contract-tabs-info-log-l">
                <div class="contract-tabs-info-log-l-l">
                  <span>
                    签约客户
                  </span>
                  厦门金鼎胜物业管理有限公司
                </div>
                <div class="contract-tabs-info-log-l-l">
                  <span>
                   合同金额
                  </span>
                  ￥1,188,000 (壹佰壹拾捌万捌仟元整、占总额：100.00%)
                </div>
              </div>
            </div>
          </div>
          <div class="contract-tabs-info-a">
            <div class="contract-tabs-info-title">
              签约驻点
            </div>
            <div class="contract-tabs-info-log mb20">
              <div class="contract-tabs-info-log-title">
                驻点1
              </div>
              <div class="contract-tabs-info-log-l">
                <div class="contract-tabs-info-log-l-l">
                  <span>
                    驻点
                  </span>
                  金龙官场
                </div>
                <div class="contract-tabs-info-log-l-l">
                  <span>
                    保安人数
                  </span>
                  0人
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--    执勤点编辑-->
    <contractDetail :visible.sync="detailVisible" :contractId="contractId" :param="param" @getList="getList"
                    @getContract="getContract"></contractDetail>
  </div>
</template>

<script>
import {contractlist} from "@/api/system/contract";
import {getCustom} from '@/api/system/custom.js'
import detail from "../detail";
import contractDetail from "./contractDetail";

export default {
  name: "infoPoint",
  components: {detail, contractDetail},
  dicts: ['sys_stagnation_type', 'sys_post_nature', 'sys_purchase_type', 'sys_deposit_type', 'sys_deposit_status'],
  props: ['paramId', 'projectData'],
  data() {
    return {
      detailVisible: false,
      projectType: {},
      userData: null,
      compayData: null,
      param: null,
      contractData: null,
      loading: true,
      contractId: 0,
      customColors: [
        {color: '#f56c6c', percentage: 20},
        {color: '#e6a23c', percentage: 40},
        {color: '#5cb87a', percentage: 60},
        {color: '#1989fa', percentage: 80},
        {color: '#6f7ad3', percentage: 100}
      ],
      activeName: 'info'
    }
  },
  watch: {
    projectData() {
      this.loading = true
      this.getContract()
      this.getUserDetail()
    }
  },
  created() {
    this.loading = true
    this.getContract()
    this.getUserDetail()
  },
  methods: {
    getContract() {
      contractlist({
        pageNum: 1,
        pageSize: 10,
        projectId: this.projectData.id
      }).then(response => {
        console.log('response:', response)
        if (response.rows.length) {
          this.contractData = response.rows[0]
        }
        this.loading = false
      });
    },
    eidtDetail() {
      this.param = JSON.parse(JSON.stringify(this.projectData))
      this.contractId = this.contractData ? this.contractData.id : 0
      this.detailVisible = true
    },
    closePoint() {
      this.$message.error('暂未开放')
    },
    getList() {
      this.$emit('getPointFn')
    },
    editPoint() {
      this.zhudianVisible = true
    },
    // 家纺详情
    getUserDetail() {
      getCustom(this.projectData.customId).then(res => {
        this.userData = {
          id: Number(res.data.id),
          name: res.data.name
        }
      })
    },
    // // 公司详情
    // getCompanyDetail() {
    //   getDept(this.projectData.companyId).then(res => {
    //     this.compayData = {
    //       deptId: res.data.deptId,
    //       deptName: res.data.deptName
    //     }
    //   })
    // },
  }
}
</script>

<style scoped>
.info-top {
  display: flex;
  align-items: center;
}

.info-top h2 {
  font-size: 16px;
  flex: 1;
}

.user-btn-status {
  border: 1px solid #ddd;
  font-size: 12px;
  display: flex;
  align-items: center;
  border-radius: 15px;
  overflow: hidden;
}

.info-header {
  border-bottom: 1px solid #f4f4f4;
}

.info-header h3 {
  font-size: 14px;
}

.info-deader-line {
  font-size: 12px;
  display: flex;
  align-items: center;
}

.line-title {
  color: rgba(0, 0, 0, .3);
  font-size: 12px;
  display: block;
  width: 100px;
  padding-left: 10px;
}

.user-btn-status span {
  cursor: pointer;
  padding: 0 20px;
  height: 30px;
  display: block;
  line-height: 30px;
}

.user-btn-status span:first-child {
  border-right: 1px solid #ddd;
}

.user-btn-status span:hover {
  background: #f8f8f8;
}

.points-map-box {
  height: 300px;
  width: 100%;
  background: #f4f4f4;
}

.points-map {
  height: 300px;
  width: 100%;
}

.info-deader-map {
  display: flex;
}

.contract-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
  font-size: 12px;
}

.contract-header span {
  margin-left: 10px;
  color: #36a3f7;
  cursor: pointer;
}

.contract-header span:hover {
  text-decoration: underline;
}

.contract-tabs-info-header {
  border: 1px solid #c9c9c9;
  border-radius: 4px;
}
</style>
